<template>
	<div class="box">	
		<header>
				<van-nav-bar
		  title="酒酿"
		  right-text="•••"
		  left-arrow
		  @click-left="onClickLeft"
		/>
		<img 
		 :src="image.foodListImgpath"/>
      </header>
		
		<!-- 中部 -->
		<section>
			<!-- p01 -->
			<div class="p01-k">
				{{image.foodListContentDetail}}
			</div>
						
			<div class="p02-k" v-for="(item,i) in commentList" :key="i">
				<h6>{{item.commentQuestion}}</h6>
				<p class="jg-k"><van-icon name="fail"/><span class="p01t-k">{{item.commentAdvice}}</span></p>
				<p class="ms-k">{{item.commentDetailAdvice}}</p>
			</div>
		</section>
		
		<!-- 底部 -->
		<footer>
			<van-tabbar v-model="active">
			  <van-tabbar-item icon="cluster">分享</van-tabbar-item>
			  <van-tabbar-item icon="chat">评论</van-tabbar-item>
			  <van-tabbar-item icon="star">收藏</van-tabbar-item>
         </van-tabbar>
		</footer>
	</div>
</template>

<script>
import Axios from 'axios';
	export default{
		name:'Fooddetails',
		data(){
			return{
				 active:'',
				id:'',
				commentList:[],
				image:''
			}
		},
		methods:{
			onClickLeft() {
           this.$router.go(-1)
			 }
  },
		mounted(){
		this.id =this.$route.query.id 
		let that = this
		Axios({
			url:'http://10.8.158.60:8080/foodlist/foodlistContentDetail',
			params:{id:that.id}
		}).then(function(data){
			that.image = data.data.msg.foodListContent
			that.commentList = data.data.msg.commentList
			
		})
	}
}
</script>


<style scoped>
	.box{
		display: flex;
		height:100%;
		flex-direction: column;
		justify-content: space-between;
	}
	header{
		width:375px;
		height:242px;		
		background-color: #F9F9F9;		
	}
	header .van-icon{
		color: #000000;
		font-weight: bold;
	}
	header .van-nav-bar__title{						
		color: rgba(100, 100, 100, 1);
		font-size: 14px;
		text-align: center;		
		font-family: Arial;		
	}
	header .van-nav-bar__text{
		color: #000000;
		font-weight: bold;
	}
	header img{
		width:375px;
		height:200px;
		
	}
	
	/* 中部 */
	section{
		flex:1;
		padding:0 14px;
	}
	section .p01-k{
		width:347px;
		min-height:60px;
		padding:14px 0 10px;
		border-bottom: 1px solid rgba(233,233,233,1);		
		color: rgba(102, 102, 102, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	
	section .p02-k{
		width:347px;
		min-height:98px;
		padding:14px 0 10px;
		border-bottom: 1px solid rgba(233,233,233,1);		
		color: rgba(102, 102, 102, 1);
		text-align: left;
	}
	section .p02-k h6{
		width: 72px;
		height: 17px;
		color: rgba(102, 102, 102, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	section .p02-k .jg-k{
		width: 40px;
		height: 14px;
		color: rgba(153, 153, 153, 1);
		font-size: 10px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	section .p02-k .jg-k .van-icon{
		width: 15px;
		height: 15px;
		background-color: rgba(153, 153, 153, 1);
		border-radius: 50%;
		color: #FFFFFF;
		text-align: center;
		line-height:15px;
	}
	
	section .p02-k .jg-k .span{
		width: 20px;
		height: 14px;
		color: rgba(153, 153, 153, 1);
		font-size: 10px;
		text-align: left;
		font-family: PingFangSC-regular;
		line-height:15px;
		margin-top:6px;
	}
	
	section .p02-k .ms-k{		
		width: 347px;
		height: 51px;
		color: rgba(102, 102, 102, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top:10px;
	}
	
	
	
	
	/* 底部 */
	footer{
		width: 375px;
		height: 38px;
		line-height: 20px;
		background-color: rgba(225, 223, 223, 1);
		text-align: center;
	}
	footer .van-hairline--top-bottom {
		width: 375px;
		height: 38px;
		line-height: 20px;
		background-color: rgba(225, 223, 223, 1);
		text-align: center;
	}

	footer .van-hairline--top-bottom .van-tabbar-item{
	  /* width: 53px; */
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
	}
footer .van-hairline--top-bottom .van-tabbar-item .van-tabbar-item__icon{
	margin-bottom: 0;
}
</style>
